<?php
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/moment.min.js');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/daterangepicker.js');
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . '/css/daterangepicker.css');
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/js/echarts.min.js');
$this->breadcrumbs = array(
    '统计信息' => array('/msgg/summary'),
    '概览',
);
?>
<div>
    <div style="margin: 0 0 10px 0;">
        <blockquote>网关概览</blockquote>
        <hr>
        <div class="submenu">
            <div class="row">
                <div class="col-xs-2">
                    <?php
                    echo CHtml::dropDownList($model,'summary_input',MsggSummary::getOptions('view_type'),array('id'=>'view_type'));
                    ?>
                </div>
                <div class="col-xs-8">
                    <button id="date-picker" class="btn btn-default" style="width:100%"></button>
                </div>
                <div class="col-xs-2">
                    <button id="report-refresh" class="btn btn-primary" style="width:100%">分析</button>
                </div>
            </div>
        </div>
        <hr>
        <div id="summary_view" style="height:600px;"></div>

    </div>
</div>
<script type="text/javascript">
    $(function () {
        var list_view_type = $('#view_type');
        var btn_date_picker = $('#date-picker');
        var btn_report_refresh = $('#report-refresh');
        var div_report_ontime = $('#report-ontime');
        var date_format = 'YYYY-MM-DD HH:mm:ss';
        init();
        btn_report_refresh.click(function () {
            getSummaryChart();
            div_report_ontime.html('').addClass('loading');
        });
        function init() {
            var m_start = moment().subtract('days', 0).startOf('day');
            var m_end = moment().endOf('minute');
            var tmp = btn_date_picker.daterangepicker(
                {
                    format: date_format,
                    showDropdowns: true,
                    opens: 'left',
                    startDate: m_start,
                    endDate: m_end,
                    timePicker: true,
                    timePicker24Hour: true,
                    timePickerIncrement: 5,
                    dateLimit: moment.duration(15, 'days'),
                    maxDate: moment().endOf('day'),
                    minDate: moment().subtract('days', 365)
                },
                function (start, end, label) {
                    btn_date_picker.html(start.format(date_format) + ' ~ ' + end.format(date_format));
                }
            );
            btn_date_picker.html(m_start.format(date_format) + ' ~ ' + m_end.format(date_format));
            getSummaryChart();
        }

        function getSummaryChart() {
            var summary_view = echarts.init(document.getElementById('summary_view'));
            getChart(summary_view, list_view_type.val());
        }

        function getChart(obj, type) {
            start = arguments[2] || btn_date_picker.data('daterangepicker').startDate;
            start = parseInt(start / 1000);
            end = arguments[3] || btn_date_picker.data('daterangepicker').endDate;
            end = parseInt(end / 1000);
            obj.showLoading();
            $.ajax({
                url: '<?php echo $this->createUrl('ajaxGetChart');?>',
                data: {type: type, start: start, end: end},
                type: "post",
                dataType: 'json',
                success: function (res) {
                    if (res.code == 0) {
                        obj.hideLoading();
                        obj.setOption(res.data);
                    } else {
                        obj.hideLoading();
                        obj.setOption({title: {text: res.msg, top: 'middle', left: 'center'}});
                    }
                },
                timeout: 90000,
                error: function (xmlHttpRequest, code) {
                    obj.hideLoading();
                    obj.setOption({title: {text: 'Error', top: 'middle', left: 'center'}});
                }
            });
        }


    });
</script>